<template>
  <view class="property-help-page">
    <!-- 紧急联系区域 -->
    <view class="emergency-section">
      <view class="section-title">
        <u-icon name="warning" size="24" color="#666"></u-icon>
        <text class="title-text">紧急联系</text>
      </view>
      
      <view class="contact-cards">
        <view class="contact-card primary" @click="callPropertyService">
          <view class="card-icon">📞</view>
          <view class="card-content">
            <text class="card-title">物业客服热线</text>
            <text class="card-phone">400-123-4567</text>
            <text class="card-desc">24小时服务，紧急情况优先处理</text>
          </view>
          <view class="card-action">
            <text class="action-text">立即拨打</text>
          </view>
        </view>

        <view class="contact-card" @click="callSecurity">
          <view class="card-icon">🛡️</view>
          <view class="card-content">
            <text class="card-title">安保值班室</text>
            <text class="card-phone">400-123-4568</text>
            <text class="card-desc">安保人员24小时值班</text>
          </view>
          <view class="card-action">
            <text class="action-text">联系安保</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快速服务区域 -->
    <view class="quick-service-section">
      <view class="section-title">
        <text class="title-icon">⚡</text>
        <text class="title-text">快速服务</text>
      </view>
      
      <view class="service-grid">
        <view class="service-item" @click="goToRepair">
          <view class="service-icon">🔧</view>
          <text class="service-label">在线报修</text>
        </view>
        
        <view class="service-item" @click="goToComplaint">
          <view class="service-icon">📝</view>
          <text class="service-label">投诉建议</text>
        </view>
        
        <view class="service-item" @click="goToPayment">
          <view class="service-icon">💰</view>
          <text class="service-label">物业缴费</text>
        </view>
        
        <view class="service-item" @click="goToNotice">
          <view class="service-icon">📢</view>
          <text class="service-label">通知公告</text>
        </view>
      </view>
    </view>

    <!-- 常见问题区域 -->
    <view class="faq-section">
      <view class="section-title">
        <text class="title-icon">❓</text>
        <text class="title-text">常见问题</text>
      </view>
      
      <view class="faq-list">
        <view class="faq-item" @click="toggleFaq(0)">
          <view class="faq-question">
            <text class="question-text">如何快速联系物业？</text>
            <text class="question-arrow" :class="{ 'arrow-down': expandedFaqs[0] }">></text>
          </view>
          <view class="faq-answer" v-if="expandedFaqs[0]">
            <text class="answer-text">您可以直接拨打物业客服热线400-123-4567，或使用在线报修功能提交问题。</text>
          </view>
        </view>
        
        <view class="faq-item" @click="toggleFaq(1)">
          <view class="faq-question">
            <text class="question-text">紧急情况如何处理？</text>
            <text class="question-arrow" :class="{ 'arrow-down': expandedFaqs[1] }">></text>
          </view>
          <view class="faq-answer" v-if="expandedFaqs[1]">
            <text class="answer-text">紧急情况请立即拨打物业客服热线，我们会优先处理并安排相关人员到场。</text>
          </view>
        </view>
        
        <view class="faq-item" @click="toggleFaq(2)">
          <view class="faq-question">
            <text class="question-text">报修后多久能处理？</text>
            <text class="question-arrow" :class="{ 'arrow-down': expandedFaqs[2] }">></text>
          </view>
          <view class="faq-answer" v-if="expandedFaqs[2]">
            <text class="answer-text">一般问题24小时内处理，紧急问题2小时内响应，我们会及时与您联系确认处理进度。</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务时间提示 -->
    <view class="service-time-info">
      <view class="info-icon">⏰</view>
      <view class="info-content">
        <text class="info-title">服务时间</text>
        <text class="info-desc">客服热线：24小时服务 | 在线服务：8:00-22:00</text>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 物业求助页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 物业求助功能页面，提供紧急联系、快速服务等功能
 */

import { ref, reactive, onMounted } from 'vue'
import { smartNavigate } from '@/utils/navigation'

// 页面数据
const expandedFaqs = ref([false, false, false])

// 页面方法
const callPropertyService = () => {
  uni.showModal({
    title: '确认拨打',
    content: '是否拨打物业客服热线 400-123-4567？',
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const callSecurity = () => {
  uni.showModal({
    title: '确认拨打',
    content: '是否拨打安保值班室 400-123-4568？',
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const goToRepair = () => {
  smartNavigate('/pages/property/repair')
}

const goToComplaint = () => {
  smartNavigate('/pages/complaint/complaint')
}

const goToPayment = () => {
  smartNavigate('/pages/property/payment')
}

const goToNotice = () => {
  smartNavigate('/pages/services/services')
}

const toggleFaq = (index) => {
  expandedFaqs.value[index] = !expandedFaqs.value[index]
}

// 页面生命周期
onMounted(() => {
  console.log('物业求助页面已加载')
})
</script>

<style scoped>
.property-help-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  padding-bottom: 40rpx;
}

/* 区域标题 */
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.title-text {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

/* 紧急联系区域 */
.emergency-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.contact-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #ff4757;
  transition: all 0.3s ease;
}

.contact-card.primary {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: #fff;
}

.contact-card.primary .card-title,
.contact-card.primary .card-phone,
.contact-card.primary .card-desc {
  color: #fff;
}

.card-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.card-content {
  flex: 1;
}

.card-title {
  display: block;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-phone {
  display: block;
  color: #ff4757;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.card-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

.card-action {
  padding: 16rpx 24rpx;
  background: #ff4757;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.contact-card.primary .card-action {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 快速服务区域 */
.quick-service-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.service-item:active {
  transform: scale(0.95);
  background: #e9ecef;
}

.service-icon {
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.service-label {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

/* 常见问题区域 */
.faq-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.faq-item {
  border: 1rpx solid #e9ecef;
  border-radius: 12rpx;
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  cursor: pointer;
}

.question-text {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.question-arrow {
  color: #666;
  font-size: 24rpx;
  transition: transform 0.3s ease;
}

.arrow-down {
  transform: rotate(90deg);
}

.faq-answer {
  padding: 0 30rpx 30rpx;
  background: #fff;
}

.answer-text {
  color: #666;
  font-size: 26rpx;
  line-height: 1.6;
}

/* 服务时间提示 */
.service-time-info {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.info-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.info-content {
  flex: 1;
}

.info-title {
  display: block;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.info-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-cards {
    gap: 20rpx;
  }
  
  .contact-card {
    padding: 20rpx;
  }
}
</style>
